var myChart = echarts.init(document.getElementById('main'),'dark');

function convertBJData(data) {
  var res = new Array();
  for (var i = 0; i < data.length; i++) {
    var geoCoords = getLocation();
    var cityname = data[i].name;
    var geoCoord = geoCoords[cityname];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      });
    }
  }
  return res;
};
function randomNum() {
  return Math.random() * 200;
}
function aNumberUnder(f) {
  var num= Math.random() * f * 100/100;
  return num.toFixed(2);
}
function  randomTempture() {
  var t = 18 + Math.random() * 4
  return t.toFixed(2);
}
function randomShidu() {
  var t = 45 + Math.random() * 20
  return t.toFixed(2);
}
function roundRandomNum(n) {
  var row = aNumberUnder(n);
  return  parseInt(row).toFixed(0);
}
function roundNum(num) {
  return parseInt(num).toFixed(0);
}
function getRandomData() {

    var json = './location.json';
    var res = [];
    $.ajaxSettings.async = false;
    $.getJSON(json,function (data) {

      var locationArr = data.location;
      for (i = 0; i < locationArr.length;i ++)
      {
        var onePage = locationArr[i];
        var resultArr = onePage.results;
        for(j=0;j < resultArr.length;j++)
        {
          var resultObj = resultArr[j];
          //{name: 'TA众创（四季青分部）',value: 500 },
          var city =  resultObj.name;
          var dataObj = {
              name:city,
          value:randomNum()
          };
          res.push(dataObj);
        }
      }
    })
    return res;
}
var color = ['#a6c84c', '#ffa022', '#46bee9'];
var series = [
  {
    name: 'pm2.5',
    type: 'effectScatter',
    coordinateSystem: 'bmap',
    data: convertBJData(getRandomData()),
    symbolSize: function (val) {
      return 15;//val[2] / 10;
    },
    label: {
      normal: {
        formatter: '{b}',
        position: 'right',
        show: false
      },
      emphasis: {
        show: true
      }
    },
    itemStyle: {
      normal: {
        color: '#ddb926'
      }
    }
  }
];
option = {
    backgroundColor: '#404a59',
    title : {
        text: 'WeWork共享办公',
        subtext: '中天智汉制图',
        x: 'left',
        textStyle : {
            color: '#fff',
          fontSize:40
        }
    },
    tooltip : {
        trigger: 'item'
    },
  visualMap: {
    min: 0,
    max: 200,
    top:10,
    left:'95%',
    calculable: true,
    inRange: {
      color: ['green', 'yellow','orange','red']
    },
    textStyle: {
      color: '#fff'
    }
  },
  bmap: {
    center: [116.404844,39.914935],//[116.4551,40.2539],
    zoom: 12,
    roam: true,
    mapStyle: {
      styleJson: [
        {
          'featureType': 'land',     //调整土地颜色
          'elementType': 'geometry',
          'stylers': {
            'color': '#081734'
          }
        },
        {
          'featureType': 'building',   //调整建筑物颜色
          'elementType': 'geometry',
          'stylers': {
            'color': '#04406F'
          }
        },
        {
          'featureType': 'building',   //调整建筑物标签是否可视
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'highway',     //调整高速道路颜色
          'elementType': 'geometry',
          'stylers': {
            'color': '#015B99'
          }
        },
        {
          'featureType': 'highway',    //调整高速名字是否可视
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'arterial',   //调整一些干道颜色
          'elementType': 'geometry',
          'stylers': {
            'color':'#003051'
          }
        },
        {
          'featureType': 'arterial',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'green',
          'elementType': 'geometry',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'water',
          'elementType': 'geometry',
          'stylers': {
            'color': '#044161'
          }
        },
        {
          'featureType': 'subway',    //调整地铁颜色
          'elementType': 'geometry.stroke',
          'stylers': {
            'color': '#003051'
          }
        },
        {
          'featureType': 'subway',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'geometry',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'all',     //调整所有的标签的边缘颜色
          'elementType': 'labels.text.stroke',
          'stylers': {
            'color': '#313131'
          }
        },
        {
          'featureType': 'all',     //调整所有标签的填充颜色
          'elementType': 'labels.text.fill',
          'stylers': {
            'color': '#777777'
          }
        },
        {
          'featureType': 'manmade',
          'elementType': 'geometry',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'manmade',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'local',
          'elementType': 'geometry',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'local',
          'elementType': 'labels',
          'stylers': {
            'visibility': 'off'
          }
        },
        {
          'featureType': 'subway',
          'elementType': 'geometry',
          'stylers': {
            'lightness': -65
          }
        },
        {
          'featureType': 'railway',
          'elementType': 'all',
          'stylers': {
            'lightness': -40
          }
        },
        {
          'featureType': 'boundary',
          'elementType': 'geometry',
          'stylers': {
            'color': '#8b8787',
            'weight': '1',
            'lightness': -29
          }
        }]
    }

  },

  series: series
};
myChart.on('click',function (params) {
  piechart.setOption({
    series : [
      {
        data: [
          {value: randomNum(), name: '男'},
          {value: randomNum(), name: '女'}
        ]
      }]
  });
  var m = roundRandomNum(300);
  barchart.setOption({
    series: [
      {
        name: '总数',
        type: 'bar',
        barGap: 0,
        //label: labelOption,
        data: [m, m]
      },
      {
        name: '实际',
        type: 'bar',
        //label: labelOption,
        data: [roundNum(m * aNumberUnder(1)),roundNum(m * aNumberUnder(1))]
      },
      {
        name: '日均',
        type: 'bar',
        //label: labelOption,
        data: [roundNum(m * aNumberUnder(1)),roundNum(m * aNumberUnder(1))]
      }
    ]
  });
  tempturechart.setOption({
    series: [
      {
        name:'温度',
        data:[randomTempture(), randomTempture(), randomTempture(), randomTempture(), randomTempture(), randomTempture(), randomTempture()],
      },
      {
        name:'湿度',
        data:[randomShidu(), randomShidu(), randomShidu(), randomShidu(), randomShidu(), randomShidu(), randomShidu()],
      }
    ]
  }),
    enegrychart.setOption({series: [{
    data: [aNumberUnder(999), aNumberUnder(999), aNumberUnder(999), aNumberUnder(999), aNumberUnder(999), aNumberUnder(999), aNumberUnder(999)]
  }]}),
    pmChart.setOption({
      series : [
        {
          name:'VOC',
          type:'line',
          stack: '总量',
          areaStyle: {normal: {}},

          data:[aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150)]
        },
        {
          name:'PM2.5',
          type:'line',
          stack: '总量',
          areaStyle: {normal: {}},
          data:[aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150)]
        }
      ]
    })


});
myChart.setOption(option);
//饼图
option2 = {
  title:{
    text:'人员性别比例',
    subtext:'数据来源---',
    x:'left',
    color:'white',
    textStyle:{
      color:'white'
    }
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient:'vertical',
    x:'right',
    data:['男','女'],
    textStyle: {
      color: '#fff'
    }
  },
  series : [
    {
      name:'男女比例',
      type:'pie',
      radius:'66%',
      center:['50%', '50%'],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        normal: {
          show: true
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: true
        }
      },
      data:[
        {value:45, name:'女'},
        {value:55, name:'男'}
      ]
    }
  ],
  color: ['rgb(252,157,154)','rgb(131,175,155)']
};
var piechart = echarts.init(document.getElementById('pieChart'),'dark');
piechart.setOption(option2);

//条形图
baroption = {
  color: ['yellow', 'green', 'pink', 'white'],
  title: {
    text: '工位统计',
    subtext: '实时',
    textStyle:{
      color:'#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['总数', '实际', '日均'],
    orient:'vertical',
    x:'right',
    textStyle: {
      color: '#fff'
    }
  },

  calculable: true,
  xAxis: [
    {
      type: 'category',
      axisTick: {show: false},
      data: ['工位', '出勤率'],
      axisLine:{
        lineStyle:{
          color:'#fff'
        }
      },
      axixLabel:{
        lineStyle:{
          color:'#fff'
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLine:{
        lineStyle:{
          color:'#fff'
        }
      },
      axixLabel:{
        lineStyle:{
          color:'#fff'
        }
      }
    }
  ],
  series: [
    {
      name: '总数',
      type: 'bar',
      barGap: 0,
      //label: labelOption,
      data: [320, 332]
    },
    {
      name: '实际',
      type: 'bar',
      //label: labelOption,
      data: [220, 182]
    },
    {
      name: '日均',
      type: 'bar',
      //label: labelOption,
      data: [220, 182]
    }
  ]
};
var barchart = echarts.init(document.getElementById('barChart'),'dark');
barchart.setOption(baroption);

//温湿度
toption = {
  title: {
    text: '温湿度',
    subtext: '数据来源',
    textStyle:{
      color:'#fff'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data:['温度','湿度'],
    textStyle: {
      color: '#fff'
    }
  },
  toolbox: {
    show: false,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: {readOnly: false},
      magicType: {type: ['line', 'bar']},
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis:  {
    type: 'category',
    boundaryGap: false,
    data: ['周一','周二','周三','周四','周五','周六','周日'],
    textStyle:{
      color:'#fff'
    },
    axisLine:{
      lineStyle:{
        color:'#fff'
      }
    },
    axixLabel:{
      lineStyle:{
        color:'#fff'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    },
    axisLine:{
      lineStyle:{
        color:'#fff'
      }
    },
    axixLabel:{
      lineStyle:{
        color:'#fff'
      }
    }
  },
  series: [
    {
      name:'温度',
      type:'line',
      smooth: true,
      data:[11, 11, 15, 13, 12, 13, 10],
      markPoint: {
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    },
    {
      name:'湿度',
      type:'line',
      smooth: true,
      data:[60, 50, 20, 50, 30, 20, 70],
      markPoint: {
        data: [
          {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'},
          [{
            symbol: 'none',
            x: '90%',
            yAxis: 'max'
          }, {
            symbol: 'circle',
            label: {
              normal: {
                position: 'start',
                formatter: '最大值'
              }
            },
            type: 'max',
            name: '最高点'
          }]
        ]
      }
    }
  ],
  color: ['rgb(131,175,155)','rgb(252,157,154)']
};
var tempturechart = echarts.init(document.getElementById('temptureChart'),'dark');
tempturechart.setOption(toption);

//能耗
eoption = {
  title: {
    text: '耗电量',
    subtext: 'kWh',
    textStyle:{
      color:'#fff'
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  visualMap: {
    top: 10,
    right: 10,
    pieces: [{
      gt: 0,
      lte: 400,
      color: '#096'
    }, {
      gt: 400,
      lte: 600,
      color: '#ffde33'
    }, {
      gt: 600,
      lte: 800,
      color: '#ff9933'
    }, {
      gt: 800,
      lte: 1000,
      color: '#cc0033'
    }],
    outOfRange: {
      color: '#999'
    }
  },
  xAxis: {
    type: 'category',
    data : ['周一','周二','周三','周四','周五','周六','周日'],
    axisLine:{
      lineStyle:{
        color:'#fff'
      }
    },
    axixLabel:{
      lineStyle:{
        color:'#fff'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLine:{
      lineStyle:{
        color:'#fff'
      }
    },
    axixLabel:{
      lineStyle:{
        color:'#fff'
      }
    }
  },
  series: [{
    name:'耗电量',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }],
  color: ['rgb(131,175,155)','rgb(252,157,154)']
};
var enegrychart = echarts.init(document.getElementById('enegryChart'),'dark');
enegrychart.setOption(eoption);
ssoption = {
  title: {
    text: '空气质量',
    textStyle:{
      color:'#fff'
    }
  },
  tooltip : {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data:['VOC','PM2.5'],
    textStyle: {
      color: '#fff'
    }
  },

  xAxis : [
    {
      type : 'category',
      boundaryGap : false,
      data : ['周一','周二','周三','周四','周五','周六','周日'],
      axisLine:{
        lineStyle:{
          color:'#fff'
        }
      },
      axixLabel:{
        lineStyle:{
          color:'#fff'
        }
      }
    }
  ],
  yAxis : [
    {
      type : 'value',
      axisLine:{
        lineStyle:{
          color:'#fff'
        }
      },
      axixLabel:{
        lineStyle:{
          color:'#fff'
        }
      }
    }
  ],
  series : [
    {
      name:'VOC',
      type:'line',
      stack: '总量',
      areaStyle: {normal: {}},

      data:[aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150)]
    },
    {
      name:'PM2.5',
      type:'line',
      stack: '总量',
      areaStyle: {normal: {}},
      data:[aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150), aNumberUnder(150)]
    }
  ]
};
var pmChart = echarts.init(document.getElementById('pmChart'),'dark');
pmChart.setOption(ssoption);


function getLocation() {
  var json = './location.json';
  var res = {};
  $.ajaxSettings.async = false;
  $.getJSON(json,function (data) {

    var locationArr = data.location;
    for (i = 0; i < locationArr.length;i ++)
    {
      var resultArr = locationArr[i].results;
      for(j=0;j < resultArr.length;j++)
      {
        var resultObj = resultArr[j];
        // '韶关': [113.7964,24.7028]
        // "location": {"lat": 39.75024, "lng": 116.554017}
        var tempLocation = new Array();
        tempLocation.push(resultObj.location.lng);
        tempLocation.push(resultObj.location.lat);
        var city =  resultObj.name;
        res[city] = tempLocation;
      }
    }
  })
  return res;
}
